<template>
	<view class="baise">
		<view class="login">
			<view class="login-header">登录，发现更多可口美食~</view>
		</view>
		<view class="login-cen">
			<view class="flex-column">
				<view class="login-cen-input1">
					<input v-model="from.mobile" placeholder="请输入手机号码" placeholder-class="login-cen-input1-p"/>
				</view>
				<view class="login-cen-input2 flex-row flex-content-between">
					<input v-model="from.code" placeholder="请输入短信验证码" placeholder-class="login-cen-input1-p"/>
					<view class="login-cen-input3">获取验证码</view>
				</view>
				<view class="login-cen-button">登录/注册</view>
				<view class="login-cen-button">一键登录</view>
				<view class="flex-row login-yuedu">
					<image @tap="addYuedu" :src="yuedu?`../../static/index/ok.png`:`../../static/index/not.png`" mode="scaleToFill"></image>
					<view>我已阅读并同意<text class="jiachu" @tap="xieyi(`用户协议`)">《用户协议》</text>和<text class="jiachu" @tap="xieyi(`隐私协议`)">《隐私政策》</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				from:{
					mobile:"",
					code:""
				},
				yuedu:false,
			}
		},
		methods:{
			addYuedu(){
				this.yuedu = !this.yuedu
			},
			xieyi(title){
				uni.navigateTo({
					url:'/pages/webview/centent?title='+title
				})
			}
		}
	}
</script>

<style lang="scss">
	.jiachu{
		font-weight: 700;
	}
	.login-yuedu{
		margin-top: 200rpx;
		margin-left: 34rpx;
		>image{
			width: 32rpx;
			height: 32rpx;
		}
		>view{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 8rpx;
		}
	}
	.login-cen-button{
		width: 658rpx;
		height: 90rpx;
		background-color: $default-button-color;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 90rpx;
		margin-top: 68rpx;
	}
	.login-cen-input3{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: $default-button-color;
		margin-right: 76rpx;
	}
	.login-cen-input2{
		margin-left: 30rpx;
		// border-bottom: 2rpx solid #F4F4F4;
		height: 60rpx;
		margin-top: 28rpx;
	}
	.login-cen-input1{
		margin-left: 30rpx;
		border-bottom: 2rpx solid #F4F4F4;
		height: 60rpx;
	}
	.login-cen-input1-p{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.login-cen{
		margin-left: 26rpx;
		margin-right: 26rpx;
		margin-top: 96rpx;
	}
	.login-header{
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		padding-top: 296rpx;
		margin-left: 30rpx;
	}
	.login{
		background-image: url('../../static/login/bj.png');
		background-size: 100%;
		height: 482rpx;
	}
</style>